<p>Hoy vamos a ver lo que podría ser una segunda parte sobre animaciones. En este capítulo veremos como establecer variables globales de velocidad para nuestras transiciones y como poder enlazar transiciones unas a otras de modo que cuando se acaba una podamos realizar otra acción una vez finalizada la inicial. </p>
<p>Vayamos con lo primero que queremos hacer, que es establecer nuevos valores de variables de velocidad para nuestras animaciones. Para crear una nueva velocidad tenemos que acceder al objeto "fx" y luego a su objeto "speeds" a este le asignaremos una nueva variable simplemente con el siguiente formato .[nuevavariable] y asignándole el valor que queremos que tenga. El siguiente ejemplo establece el valor de nuestra variable velocidad a 1 segundo:</p>
<pre>
$.fx.speeds.velocidad = 1000;
</pre>
<p>Lo siguiente que queremos realizar es enlazar una animación a otra, las animaciones vimos en el anterior capítulo algunos ejemplos, pues recordemos que el primer parametro que se le puede pasar es la velocidad de la transición, pues el segundo parámetro que se le puede pasar a una animación es una función que se ejecutará tras finalizar la animación. Por ejemplo:</p>
<pre>
$('#btSlideUp').on('click', function(){
	$('.jqCap17').slideUp('velocidad', function(){
		$('.jqCap17').slideDown('velocidad');
	});
});
</pre>
<p>La explicación de este código es sencilla. Al clickar el botón con id "btSlideUp" nuestro elementos de clase "jqCap17" realizarán un "slideUp" a la velocidad que tengamos establecida en nuestra variable creada con anterioridad. Una vez finalizado dicho "slideUp" realizará un nuevo despliegue (slideDown) de los elementos que se encogieron. Pero para completar este ejemplo, y que se vea algo más interactivo se me ha ocurrido poner un par de botones más que posibiliten que podáis aumentar/disminuir la velocidad de la transición, simplemente porque se cambia el valor de nuestra variable anterior.</p>

<p>Html:</p>
<pre>
<button id="btSlideUp">Slide Up</button>
<button id="btMasVel">+</button>
<button id="btMenosVel">-</button>
<div class="ejemplos jqCap17"></div>
</pre>

</p>JavaScript</p>
<pre>
$(document).on('ready', function(){

	$.fx.speeds.velocidad = 1000;

	$('#btSlideUp').on('click', function(){
		$('.jqCap17').slideUp('velocidad', function(){
			$('.jqCap17').slideDown('velocidad');
		});
	});

	$('#btMasVel').on('click', function(){
		$.fx.speeds.velocidad = $.fx.speeds.velocidad - 100;
	});

	$('#btMenosVel').on('click', function(){
		$.fx.speeds.velocidad = $.fx.speeds.velocidad + 100;
	});
});
</pre>

<p>Ejemplo funcional:</p>
<button id="btSlideUp">Slide Up</button>
<button id="btMasVel">+</button>
<button id="btMenosVel">-</button>
<div class="ejemplos jqCap17"></div>

<script type="text/javascript" src="http://www.rfsouto.com/Scripts/capitulo17.js"></script>
<script type="text/javascript">
<!--
jqPostEfecto();
//-->

</script>